<template>
  <div class="yycgxq-bg">
    <div class="yycgxq-container">
      <!-- 顶部预约成功 -->
      <div class="success-icon-block">
        <div class="success-icon">
          <svg width="48" height="48" viewBox="0 0 48 48">
            <circle cx="24" cy="24" r="24" fill="#f5f5f5" />
            <circle cx="24" cy="24" r="20" fill="#3ec99e" />
            <polyline
              points="16,25 22,31 32,19"
              fill="none"
              stroke="#fff"
              stroke-width="3.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
        <div class="success-title">预约成功</div>
      </div>

      <!-- 医生信息卡片 -->
      <div class="doctor-card">
        <div class="doctor-avatar">
          <img :src="params.avatar" alt="头像" />
        </div>
        <div class="doctor-info">
          <div class="doctor-row">
            <span class="doctor-name">{{ params.name }}</span>
            <span class="doctor-label doctor-label-main">{{ params.grade }}</span>
            <span class="doctor-label doctor-label-dept">{{ params.depa }}</span>
          </div>
          <div class="doctor-hospital">{{ params.hospitalName }}</div>
          <div class="doctor-specialty">
            擅长：<span>{{ params.depa }}</span>
          </div>
        </div>
      </div>

      <!-- 预约时间 -->
      <div class="info-block">
        <div class="info-title gray">
          <img src="/static/UtilsImage/Search.png" class="info-icon" />
          预约时间
        </div>
        <div class="info-content">
          <span class="info-date">{{ params.appointmentTime }}</span>
          <span class="info-time">上午11时</span>
        </div>
      </div>

      <!-- 医院信息 -->
      <div class="info-block">
        <div class="info-title">
          <img src="/static/MyImage/address.png" class="info-icon" />
          就诊医院
        </div>
        <div class="info-content">
          <div class="info-label">
            医院名称：<span class="info-bold">{{ params.hospitalName }}</span>
          </div>
          <div class="info-label">
            医院地址：<span class="info-normal">{{ params.hospitalAddress }}</span>
          </div>
        </div>
      </div>

      <!-- 预约人信息 -->
      <div class="info-block">
        <div class="info-title">
          <img src="/static/MyImage/order.png" class="info-icon" />
          预约信息
        </div>
        <div class="info-content">
          <div class="info-label">
            预约人姓名：<span class="info-bold">{{ memberStore.username }}</span>
          </div>
          <div class="info-label">
            预约人电话：<span class="info-normal">{{ memberStore.userPhone }}</span>
          </div>
        </div>
      </div>

      <div class="divider"></div>

      <!-- 底部按钮 -->
      <div class="btn-group">
        <button class="btn btn-main" @click="goToMyYyxx">我的预约记录</button>
        <button class="btn btn-secondary" @click="goToHome">首页</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useMemberStore } from '@/store'

const name = ref('')
const params = ref({})
const memberStore = useMemberStore()
onLoad((query) => {
  params.value = query
  console.log(params.value)
  name.value = memberStore.username
})
const goToMyYyxx = () => {
  uni.navigateTo({
    url: '/pages/component/MyPage/appointmentbooking/appointmentbooking',
  })
}
const goToHome = () => {
  uni.navigateTo({
    url: '/pages/index/index',
  })
}
</script>

<style lang="scss" scoped>
.yycgxq-bg {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 0;
}
.yycgxq-container {
  max-width: 420px;
  margin: 0 auto;
  background: transparent;
  padding: 32px 0 0 0;
}
.success-icon-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
}
.success-icon {
  margin-bottom: 8px;
}
.success-title {
  font-size: 20px;
  color: #bdbdbd;
  font-weight: 600;
  margin-bottom: 18px;
}
.doctor-card {
  display: flex;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px 0 #e6f7e6;
  padding: 22px 20px 18px 20px;
  margin: 0 16px 18px 16px;
  align-items: center;
}
.doctor-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #eaeaea;
  overflow: hidden;
  margin-right: 16px;
  flex-shrink: 0;
  border: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.doctor-info {
  flex: 1;
  min-width: 0;
}
.doctor-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.doctor-name {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin-right: 8px;
}
.doctor-label {
  display: inline-block;
  font-size: 13px;
  border-radius: 4px;
  padding: 2px 10px;
  margin-right: 6px;
  font-weight: 500;
  &.doctor-label-main {
    background: #3ec99e;
    color: #fff;
  }
  &.doctor-label-dept {
    background: #e6f7e6;
    color: #3ec99e;
    border: 1px solid #3ec99e;
  }
}
.doctor-hospital {
  font-size: 14px;
  color: #222;
  margin-bottom: 2px;
}
.doctor-specialty {
  font-size: 13px;
  color: #ff4757;
  span {
    color: #ff4757;
    font-weight: 500;
  }
}
.info-block {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 #e6f7e6;
  margin: 0 16px 18px 16px;
  padding: 18px 18px 10px 18px;
}
.info-title {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #bdbdbd;
  font-weight: 500;
  margin-bottom: 10px;
  &.gray {
    color: #bdbdbd;
  }
}
.info-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}
.info-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: #222;
}
.info-date {
  color: #222;
  font-size: 15px;
  margin-right: 8px;
}
.info-time {
  color: #222;
  font-size: 20px;
  font-weight: 700;
}
.info-label {
  color: #222;
  font-size: 15px;
  margin-bottom: 2px;
}
.info-bold {
  font-weight: 700;
  color: #222;
}
.info-normal {
  color: #222;
}
.divider {
  height: 2px;
  background: #3ec99e;
  margin: 32px 16px 24px 16px;
  border-radius: 2px;
}
.btn-group {
  margin: 0 16px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.btn {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-main {
  background: #3ec99e;
  color: #fff;
}
.btn-secondary {
  background: #fff;
  color: #3ec99e;
  border: 1.5px solid #3ec99e;
}
</style>
